<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            padding: 0;
            margin: 0;
        }
        
        #box {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
        }
        
        #box div {
            width: 98px;
            height: 98px;
            line-height: 98px;
            border: 1px solid red;
            text-align: center;
            position: absolute;
        }
        
        #box div:nth-child(2) {
            left: 100px;
        }
        
        #box div:nth-child(3) {
            left: 200px;
        }
        
        #box div:nth-child(4) {
            left: 200px;
            top: 100px;
        }
        
        #box div:nth-child(5) {
            left: 200px;
            top: 200px;
        }
        
        #box div:nth-child(6) {
            left: 100px;
            top: 200px;
        }
        
        #box div:nth-child(7) {
            top: 200px;
        }
        
        #box div:nth-child(8) {
            top: 100px;
        }
        
        #box input {
            position: absolute;
            left: 101px;
            top: 101px;
            width: 98px;
            height: 98px;
            border: 1px solid red;
        }
        
        #box:hover input {
            border: 1px solid blue;
        }
        
        .red {
            background-color: red;
        }
        
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box">
        <div>一等奖</div>
        <div>二等奖</div>
        <div>三等奖</div>
        <div>四等奖</div>
        <div>五等奖</div>
        <div>六等奖</div>
        <div>七等奖</div>
        <div>八等奖</div>
        <input type="button" id="startBtn" value="开始">
    </div>
    <h2></h2>
    <script>
        var box = document.getElementById('box');
        var allDiv = box.getElementsByTagName('div');
        var startBtn = document.getElementById('startBtn');
        var scoreH2 = document.getElementsByTagName('h2')[0];
        var timer = null;
        var flag = false; //表示定时器没有执行
        startBtn.onclick = function() {
            if (flag) {
                return;
            }
            flag = true;
            // var idx = Math.ceil(Math.random() * 8); //1-8 奖品编号
            var idx = Math.ceil(Math.random() * 24); //1-24 奖品编号; //(idx%8?idx%8:8)
            var k = 0; //allDiv下标编号0-7
            timer = setInterval(function() {
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].className = "";
                }
                allDiv[k % 8].className = "red";
                if (k == idx - 1) {
                    clearTimeout(timer);
                    flag = false;
                    // scoreH2.innerText = "恭喜你中了" + idx + "等奖"
                    scoreH2.innerText = "恭喜你中了" + (idx % 8 ? idx % 8 : 8) + "等奖"
                }
                k++;
            }, 100)
        }
    </script>
</body>

</html>